/**
 * Created with hong.rong
 * Date:2020/07/27
 */

import React from 'react'
import classNames from 'classnames'
import { isString } from 'lodash'
import './index.less'

export default function WithSubTitle({
  children,
  title,
  className = '',
  anchorId = '',
  borderVisible = true,
}) {
  if (typeof title === 'function') {
    return (
      <div>
        {title()}
        {children}
      </div>
    )
  }
  if (isString(anchorId) && anchorId) {
    return (
      <div id={anchorId} className={classNames('with-subtitle', className)}>
        <h3 className={classNames({ 'border-bottom-1': borderVisible })}>
          {title}
        </h3>
        {children}
      </div>
    )
  }
  return (
    <div className={classNames('with-subtitle', className)}>
      <h3 className={classNames({ 'border-bottom-1': borderVisible })}>
        {title}
      </h3>
      {children}
    </div>
  )
}
